<template>
  <div class="container">
    <!--<zzj1 :msg3="msg1"></zzj1> 父-子传值（绑定数据模型里面的数据）-->
    <!-- <zzj1 val="1"></zzj1>  1父-子传值（自定义属性）-->
    <!--<zzj1>
      <span>{{msg1}}---无名插槽传值</span>  2.1父-子传值（无名插槽传值）
    </zzj1>-->
    <!--<zzj1>
      <span slot="apple">{{msg1}}---有名插槽传值</span>  2.2父-子传值（有名插槽传值）
    </zzj1>-->
    <!--<zzj1 a="12345"></zzj1>  3父-子传值（attrs）-->
    <!--<zzj1 :ref="arr[1]"></zzj1>  4父-子传值（ref）-->
    <!--<zzj1 :msg1="msg1" :visible="isShow" @updateVisible='isShow = false'></zzj1>-->
    <zzj1 :msg1="msg1" :visible.sync="isShow"></zzj1>
    <!---->
    <zzj2 :msg2="msg2"></zzj2>   <!---->
    <input type="button" value="按 钮">
    <p>{{val}}</p>
  </div>
</template>

<script>
/* eslint-disable indent */

import zzj1 from './components/zzj1';
import zzj2 from './components/zzj2';

export default {
  name: 'App',
  data() {
    return {
      isShow: true,
      msg1: '我是子组件1',
      msg2: '我是子组件2',
      val: 'fsdfjksdjkkjfd',
      arr: [1, 'as', 3, 4, 5, 6],
    };
  },
  methods: {
  },
  mounted() {
    // this.$refs.as.msg = '1231';
  },
  components: { zzj1, zzj2 }, //  注册标签名
};
</script>

<style>
  *{
    padding:0;
    margin: 0;
  }
.container{
  background: #d6d6ff;
  width: 100%;
  height: 100%;
  color: #fff;
}
</style>
